<template>
  <el-form :model="form" ref="formRef" label-width="100px" @submit.prevent>
    <el-form-item label="论文 (PDF)" prop="thesis" :rules="[{ required: true, message: '请上传论文', trigger: 'change' }]">
      <el-upload
        class="upload-demo"
        action=""
        :http-request="handleThesisUpload"
        :show-file-list="true"
        :auto-upload="false"
        :file-list="thesisFileList"
        accept=".pdf"
        :limit="1"
        :on-change="onThesisChange"
      >
        <el-button type="primary">选择论文</el-button>
      </el-upload>
    </el-form-item>
    <el-form-item label="支撑材料 (RAR)" prop="support" :rules="[{ required: true, message: '请上传支撑材料', trigger: 'change' }]">
      <el-upload
        class="upload-demo"
        action=""
        :http-request="handleSupportUpload"
        :show-file-list="true"
        :auto-upload="false"
        :file-list="supportFileList"
        accept=".rar"
        :limit="1"
        :on-change="onSupportChange"
      >
        <el-button type="primary">选择支撑材料</el-button>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitUpload" :loading="loading">上传</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const props = defineProps({
  contestId: { type: String, required: true },
  topicId: { type: String, required: true }
})
const emit = defineEmits(['success'])

const form = ref({ thesis: null, support: null })
const formRef = ref(null)
const thesisFileList = ref([])
const supportFileList = ref([])
const loading = ref(false)

const onThesisChange = (file, fileList) => {
  form.value.thesis = file.raw
  thesisFileList.value = fileList.slice(-1)
}
const onSupportChange = (file, fileList) => {
  form.value.support = file.raw
  supportFileList.value = fileList.slice(-1)
}

const handleThesisUpload = () => {}
const handleSupportUpload = () => {}

const submitUpload = async () => {
  await formRef.value.validate(async (valid) => {
    if (!valid) return
    loading.value = true
    try {
      const formData = new FormData()
      formData.append('contestId', props.contestId)
      formData.append('topicId', props.topicId)
      formData.append('thesis', form.value.thesis)
      formData.append('support', form.value.support)
      const token = localStorage.getItem('token')
      const res = await axios.post('/api/students/works/upload', formData, {
        headers: {
          'Authorization': `Bearer ${token}`,
          'Content-Type': 'multipart/form-data'
        }
      })
      if (res.data.code === 200) {
        ElMessage.success('上传成功')
        emit('success', res.data.data)
        // 清空表单
        form.value.thesis = null
        form.value.support = null
        thesisFileList.value = []
        supportFileList.value = []
      } else {
        ElMessage.error(res.data.message || '上传失败')
      }
    } catch (e) {
      ElMessage.error(e?.response?.data?.message || '上传失败')
    } finally {
      loading.value = false
    }
  })
}
</script>

<style scoped>
.upload-demo {
  display: inline-block;
}
</style>

